<template>
  <div class="view-container">
    <header-module :left-custom="true" :padding="true">
      <template #left-con>
        <div v-if="formData">
          <span style="font-size: 16px; margin-right: 20px">
            {{ formData.agent.userName }}
          </span>
          <el-tag type="warning" size="small" style="margin-right: 20px">
            <span v-if="formData.agent.tradeStatus === ''">准兼职</span>
            <span v-if="formData.agent.tradeStatus === '1'">正式兼职</span>
          </el-tag>
          <el-tag type="warning" size="small">
            {{ getLabel('agent_status_person', formData.agent.agentStatus) }}
          </el-tag>
        </div>
      </template>
      <template #btn>
        <el-button class="border-btn" size="small" @click="handlBack">返回</el-button>
        <el-button class="main-btn" size="small" type="primary" @click="handlEdit(formData.agent.id)">变更信息
        </el-button>
      </template>
    </header-module>
    <div style="background-color: white;padding-top: 20px">
      <el-form :inline="true" label-position="left" size="small" class="filter-form-inline">
        <el-row :gutter="40" style="margin-left: 0px; margin-right: 0px">
          <el-col :lg="6" :xs="4" class="col">
            <el-form-item label="兼职编号：">
              {{ formData.agent.agentNumber }}
            </el-form-item>
          </el-col>
          <el-col :lg="6" :xs="4">
            <el-form-item label="兼职级别：">
              {{ getLabel('agent_person_level', formData.agent.agentLevel) }}
            </el-form-item>
          </el-col>
          <el-col :lg="6" :xs="4">
            <el-form-item label="详细地址：" class="item_col">
              {{ formData.agent.address }}
            </el-form-item>
          </el-col>

        </el-row>
      </el-form>
    </div>
    <div class="main-content" style="margin-top: 20px">

      <div class="list-container">
        <el-tabs v-model="activeName" @tab-click="handleClick">
          <el-tab-pane label="详细信息" name="detailedInformation" />
          <template v-if="formData.agent.agentStatus !== '-1'">
            <el-tab-pane label="负责产品与价格" name="productPrice" />
            <el-tab-pane label="开发中终端" name="developmentTerminal" />
          </template>
          <el-tab-pane
            v-if="formData.agent.agentStatus ==='4' || formData.agent.tradeStatus === '1'"
            label="交易终端"
            name="tradingTerminal"
          />
          <el-tab-pane label="兼职合同" name="partTimeContract" />
          <template v-if="formData.agent.agentStatus !== '-1'">
            <!--            <el-tab-pane label="审批流程" name="approvalProcess" />-->
            <el-tab-pane label="修改记录" name="modifyRecord" />
          </template>
        </el-tabs>
      </div>

      <component
        :is="componentTabs"
        :id="Number(formData.id)"
        ref="refComponentTabs"
        mode="agent_person"
        type="agent_person"
        :datas="formData.agent"
        :contract-data="contractData"
        :form-data="formData"
      />
    </div>

    <formPersonnel ref="formPersonnel" @succsess="succsess" />
  </div>
</template>

<script>
import {computed, defineAsyncComponent, inject, onMounted, reactive, toRefs} from 'vue'
import {useRoute, useRouter} from 'vue-router'

export default {
  name: 'Details',
  components: {
    detailedInformation: defineAsyncComponent(() => import('../modules/partTimeBigBag/detailedInformation.vue')),
    productPrice: defineAsyncComponent(() => import('../signedAgent/detail/modules/productAndPrice/index.vue')),
    tradingTerminal: defineAsyncComponent(() => import('../signedAgent/detail/modules/tradingTerminal/index.vue')),
    developmentTerminal: defineAsyncComponent(() => import('../modules/partTimeBigBag/developmentTerminal.vue')),
    partTimeContract: defineAsyncComponent(() => import('../../commonView/contract/contract.vue')),
    approvalProcess: defineAsyncComponent(() => import('../modules/partTimeBigBag/approvalProcess.vue')),
    modifyRecord: defineAsyncComponent(() => import('../modules/partTimeBigBag/modifyRecord.vue')),
    formPersonnel: defineAsyncComponent(() => import('../modules/partTimeBigBag/formPersonnel.vue'))
  },
  setup(props, context) {
    const api = inject('api')
    const router = useRouter()
    const route = useRoute()
    var data = reactive({
      formPersonnel: null,
      activeName: 'detailedInformation',
      refComponentTabs: null,
      formData: {
        agent: {},
        contract: {}
      },
      contractData: {
        id: '',
        name: '',
        contractType: 'agent',
        contractObjectType: 'agent_person',
        title: '兼职合同详情',
        disabled: true,
      },
    })
    const handlBack = () => {
      router.go(-1)
    }

    const handleClick = (tab) => {
      data.activeName = tab.props.name
    }

    const handlEdit = (row) => {
      data.formPersonnel.open(row, 2)
    }

    const componentTabs = computed(() => {
      return data.activeName
    })

    const succsess = () => {
      handlDetail(route.query.id)
    }

    const handlDetail = async(id) => {
      const res = await api.channelAgent.POTENTIALAGENT_DETAIL(id)
      if (res.code === 0) {
        data.formData.agent = res.data.agent
        data.contractData.id = data.formData.agent.id
        data.contractData.name = data.formData.agent.userName
      }
      // let ress = await api.channelAgent.POTENTIALAGENT_CONTRACT_DETAIL(id)
      // if (ress.code === 0) {
      //   data.formData.contract = ress.data.contract
      // }
    }

    //* *****************
    onMounted(_ => {
      if (route.query.id) {
        handlDetail(route.query.id)
      }
    })
    //* *****************

    return {
      ...toRefs(data),
      componentTabs,
      handleClick,
      handlBack,
      handlDetail,
      handlEdit,
      succsess
    }
  }
}

</script>

<style scoped>
  /* @import url(); 引入css类 */
</style>
